Cursus 


Werken met JavaScript: deel 2 


Spelen met kleuren 


Constanten, variabelen, selecties en expressies kennen we nu al. Om echt JavaScript te kun- 
nen schrijven, moeten we echter ook weten wat functies zijn. In dit deel zullen we een script 
gebruiken waarmee we de achtergrond van kleur kunnen doen veranderen terwijl de pagina 


geladen wordt. 


isschien wil je de tekst graag gra- 
MI dueel zichtbaar maken, zoals dat 
soms ook in een film gebeurt. Fade 
in, wordt zoiets professioneel genoemd. 


Daarvoor moet je weten wat lussen zijn en 
hoe functies in elkaar steken. 


Lussen 


Wie graag eenzelfde boodschap pakweg hon- 
derd maal op zijn webpagina doet verschij- 
nen, kan dat natuurlijk perfect in html re- 
gelen. Je schrijft de zin één keer en kopieert 
deze x-aantal malen tot je aan het gewenste 
totaal komt. Zonder dieper in te gaan op de 
zinvolheid van zo’n daad, gaat het hier om 
het principe van een lus: je wil iets herhalen 
tot er niet langer meer aan de juiste voor- 
waarde voldaan is. Anders gezegd: zolang 
jij verkouden bent, moet je driemaal daags 
je hoestsiroop innemen. Ben je niet meer 
verkouden, dan stop je met het innemen van 
dat medicijn. In JavaScript bereik je dit via 
de opdracht For of ware. Hoewel beide ei- 
genlijk hetzelfde doen, is de wijze waarop je 
de code moet neerschrijven, anders. 


e For 

hexa = new Array (16) 

for(var i = 0; i 10; i++) hexal[i] = is 
hexa[10]="a"; hexa[11]="b"; hexa[1l mene 
hexa[13]="d"; hexa[{14]="e"; hexa[15]}="£"; 


Een voorbeeld van een lusbewerking met for. 


FOR (PARAMETER; VOORWAARDE; BEWERKING) 
DOCUMENT. WRITE(“MIJN BOODSCHAP”) 


We hebben opgegeven dat een variabele een 
bepaalde bewerking moet uitvoeren tot er 
aan de opgegeven voorwaarde voldaan werd. 


CLICKX MAGAZINE 46 - 29 JULI 2003 


Bij de verkoudheid is die voorwaarde dat je 
genezen moet zijn. Bij ons eerste voorbeeld 
(het honderd maal tonen van dezelfde zin ) 
is die voorwaarde dat de variabele kleiner of 
gelijk moet zijn aan roo. Blijven we binnen 
die grens, dan zal ‘Mijn boodschap’ getoond 
worden via het reeds gekende pocu- 
MENT.WRITE() (zie Clickx 45). 

Wat als er echter meerdere zaken uitgevoerd 
moeten worden: denk maar aan het doen 
verschijnen van twee zinnen? Ook dat kan 
met FOR. In dat geval plaats je datgene wat 
uitgevoerd moet worden, tussen accolades: 


FOR (PARAMETER; VOORWAARDE; BEWERKING) 
DOCUMENT.WRITE(“MIJN BOODSCHAP”) 
DOCUMENT. WRITE(“MIJN TWEEDE BOODSCHAP”) 


} 


In dit voorbeeld plaatsten we alles op af- 
zonderlijke regels om het script vlot leesbaar 
en overzichtelijk te houden. Niets weerhoud 
je om alles achter elkaar te plaatsen op één 
regel. Zorg er dan wel voor dat de opdrach- 
ten die je wil laten uitvoeren, gescheiden 
zijn door een kommapunt: 


FOR (PARAMETER; VOORWAARDE; BEWERKING) 
{DOCUMENT.WRITE(“MIJN BOODSCHAP”); DO- 
CUMENT. WRITE(“MIJN TWEEDE BOODSCHAP”) } 


Het belangrijkste onderdeel bij FOR vind je 
terug tussen de haakjes: 


(PARAMETER; VOORWAARDE, BEWERKING). 


‘Parameter’ is een variabele die een waar- 
de meekrijgt. Zoals je in het vorige deel ge- 
zien hebt, kan je anders geen bewerkingen 
doorvoeren. Bijvoorbeeld crickx = 15. De 


‘Voorwaarde’ geeft aan tot aan welke grens 
de opdracht uitgevoerd mag worden. Met 
andere woorden, binnen welk bereik moet 
de waarde van de variabele clickx blijven? 
Bijvoorbeeld: CLICKX <= roo;. Dit betekent 
dat de variabele clickx kleiner of gelijk moet 
zijn aan roo. Gaat het aantal daarboven, 
dan wordt de opdracht niet langer meer uit- 
gevoerd. Blijft de waarde van de variabele 
‘click’ binnen het aangegeven terrein, dan 
zal de opdracht wel uitgevoerd zijn. Ten 
slotte is er een onderdeel ‘Bewerking’. Ja- 
vaScript telt niet automatisch van 1 naar 2. 
Als bewerking zal het hier meestal gaan 
over optellen: je wil dat van 1 naar 2 over- 
gestapt wordt. Bijvoorbeeld: CLICKX++ of 
CLICKX = ++. Eigenlijk vertel je hier dat de 
teller na het uitvoeren van de opdracht met 
1 verhoogd moet worden. Het ziet er dan 
als volgt uit: 


FOR (CLICKX = I; CLICKX <= IOO; CLICKX++) 
DOCUMENT. WRITE(“MIJN BOODSCHAP”) 
DOCUMENT. WRITE(“MIJN TWEEDE BOODSCHAP”) 


} 
e While 


Terwijl je bij wamre ook dezelfde elementen 
nodig hebt, ziet de syntax er van deze op- 
dracht toch iets anders uit. Zoals je merkt, 
zal je achter While enkel de voorwaarde tus- 
sen haakjes plaatsen. 


CLICKX = I 

WHILE (CLICKX <= 100) 

DOCUMENT. WRITE(“MIJN BOODSCHAP”) 
CLICKX = ++ 


} 


Functies 


Een functie laat ons toe gelijkaardige opdrachten op verschil- 
lende plaatsen te herhalen, zonder dat we de hele code moeten 
hertypen. Het maakt het werk daardoor niet enkel gemakkelij- 
ker, het zorgt er ook voor dat je html-pagina overzichtelijker blijft. 
Wie met een functie wil werken, moet beseffen dat hij twee za- 
ken moet doen voor hij ervan gebruik kan maken. Logischerwijs 
moet je de functie eerst bepalen om ze daarna op te roepen. Het 
bepalen of definiëren van een functie verloopt als volgt: 


FUNCTION CLICKX() 


{ 
} 


Hier hebben we een functie gemaakt met de naam clickx. De pa- 
rameters plaatsen we tussen de haakjes (). Wat er vervolgens uit- 
gevoerd moet worden, plaats je tussen accolades {}. De volgen- 
de stap is deze functie aan te roepen. Dat doe je als volgt: cuCkx(). 
Het aanroepen gebeurt op identiek dezelfde wijze als deze van 
de variabele: je geeft de naam op met tussen haakjes de para- 
meter(s). Wil je dat de functie ook nog een waarde teruggeeft, 
moet je de waarde van de functie toekennen aan een variabele. 
Dat kan je als volgt doen: TIJDSCHRIFT = CLICKX(). Hierbij krijgt de 
variabele Tijdschrift de waarde van de functie clickx() mee. Enig 
probleem: als je dit uitprobeert, krijg je helemaal geen waarde 
terug. Dat betekent dat je nog eerst een waarde moet retourne- 
ren, zoals dat genoemd wordt. Dat doe je via RETURN met daar- 
achter de waarde die teruggestuurd moet worden: RETURN 10. 
Wanneer we alles samenvoegen, ziet het er als volgt uit: 


FUNCTION CLICKX() 
DOCUMENT. WRITE(“CLICKX KRIJGT EEN *) 
RETURN IO 


} 


TIJDSCHRIFT = CLICKX() 
DOCUMENT. WRITE(TIJDSCHRIFT) 


Wanneer je dit in je script gebruikt, zal je op het scherm ‘Clickx 
krijgt een ro’ zien verschijnen. Tussen de haakjes achter de func- 
tie, kan je nog een parameter vermelden. Hoewel het hier om 


VOOR GEVORDERDEN D D D 


meerdere parameters kan gaan — gescheiden door een komma 
— is de werkwijze voor 1 parameter dezelfde. 


FUNCTION HEX(i) 
IF (Ì < O) RETURN “oo”; 
ELSE IF (1 > 255) RETURN “FF”; 
ELSE RETURN “” + HEXA[MATH.FLOOR(i/16)] + HEXA[i%16]; 


} 


Hier maken we meteen ook gebruik van IF. ELSE, een variatie op 
If dat we in de vorige les gezien hebben. We bepalen dat de func- 
tie hex de parameter i meekrijgt. Wat we eigenlijk doen is de 
hexadecimale waarde voor een kleur bepalen, die tussen o en 255 
moet liggen. Daarom geven we aan dat als de waarde i kleiner is 


function hex(i) 


if (i < 0) return "00"; 
else if (i > 255) return "£f"; 
else return "” + hexa{Math.floor(i/16)]) + hexa{ië16); 


Hier wordt gewerkt met één parameter.… 


dan o, de hexadecimale waarde oo moet gegeven worden. Is de 
waarde groter dan 255 dan zal er gekozen worden voor ff. Met de 
informatie die we tot nu toe verzameld hebben, is het mogelijk om 
ons volgende JavaScript in elkaar te steken: een fade-in waarbij we 
van kleur A over een aantal andere kleuren naar kleur Z evolueren 
terwijl de pagina geladen wordt. Voor we hieraan beginnen, toch 
nog een laatste opmerking. Helemaal onderaan vind je de opdracht: 
FADE(0,0,0,255,255,255,100);.De waarden die hier gegeven werden, 
volgen het RGB kleurmanagementsysteem. De eerste drie cijfers 
(o,o,o) geven de startkleur aan (zwart). De volgende drie (255,255,255) 
geven de eindkleur aan (wit) en het cijfer roo bepaalt de interval- 
sprongen die gemaakt worden. Deze informatie kan je zelf wijzi- 
gen wanneer je wil beginnen of eindigen bij een andere kleur. 


function fadel(a,b,c,d‚e,f£,9g) 
sr=a;sg=b;sb=c;er=dseg=eseb=f; step=g;at=1; 
setBg() ; 


… en hier zie je meerdere parameters. 


Html: Hypertext Markup Language. Een soort computertaal waar- 
mee webpagina's worden aangemaakt. Eigenlijk zijn html-pagina’s 
gewone tekstpagina’s met allerlei codes die verwijzen naar de 
kleur, de beelden, de opmaak, het geluid waarmee deze pagina’s 
op een browser worden getoond. 


Kleurmanagementsysteem: Wijze waarop kleuren samengesteld 
worden. Voor een monitor is dat RGB (Red, Green, Blue); voor een 
printer is dat CMYK (Cyan, Magenta, Yellow, blacK). Door andere 

kleuren met elkaar te mengen, krijg je ook andere tinten die onder- 
ling licht durven af te wijken. 
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Le More stupid Web tricks 


By Lauren Guzak and Patrick Joseph 
(126,89, updated 6/22/01) 


Fade in, Fade out 


This one's been around for a while, but when it first hit the scene it elicited more than a few oohs and ST 
ahs. In the interest of keeping it from fading away, here's how to make the background of your pages 
fade from one color to another when the page is loaded. From CNET Web 


Fade-In Script 


SCRIPT LANGUAGE="JavaScript"> 


exa = new Arrayl16); 
7 i < 10; i++) hezali} = i; 
hexall1}="b"; hexall 
; hexal14}="e"; hexa{15}= 


lt's easy to implement, although you'll want ta come up with your own calor scheme. ee 
Eunction hex(i) { 


st if (ä < 0} zeturn "00"; 

ep one else if (i > 255) return "££"; 

Paste this JavaScript code into the head of your page. k From CNET Web Building else return "* + hexalMath.floor(i/16)] + hexalië16); 
E 5 } 

Step two Web Building 


function zetbgColor(r, g, b) { 
var hr = hex(r); var hg = hex(g); var hb = hex(b); 
document.bgColor = "$"+hr*hg*hb; 


To create your own color scheme, just tweak the last line of script. 

Building 
fade(0,0,0,255,255,255,100); fl 
k 
Play with the seven numbers. The first three are the red, green, and blue values for the starting RGB 
color; the next three are the same for the finishing color. The final number tells the function how 
many steps to take from the first color to the last. The higher this number, the slower and more 
gradual the fade.So the existing numbers tell the page to fade from black (0,0,0) to white 


var sr,sg,sb,er,eg,eb,step,at; 


Eunction zetBg() 4 
zetbgColor ( 
Math.floor(sr * ((step-at)/step, + er * (at/step)), 
Mat cor(sg * ((step-at)/step) + eg * (at/step 
Math.floor(sb * ((step-at)/step) + eb * (ae/step)}); 


at++; 
2E (atc=step) setTimeout("setBg()",1); 
} 

Het script in actie met 150 gradaties tussen zwart en wit. Eunction Eadela,bre,d,e,f,9) | 


=r=assgb;sb=ejer=djagvejeb=fj step=g;ar=l; 


ZIT HIER TOEVALLIG EEN 
JAVAAN 72 


De code die je gemakkelijk kan kopiëren. 


FUNCTION SETBGCOLOR(R, G, B) { 
VAR HR = HEX(R); VAR HG = HEX(G); VAR HB = HEX(B); 
DOCUMENT.BGCOLOR = “#”+HR+HG+HB; 


VAR SR,SG,SB,ER,EG,EB,STEP,AT; 
FUNCTION SETBG() { 


SETBGCOLOR( 
MATH.FLOOR(SR * ((STEP-AT)/ STEP) + ER * 


PROBLEMEN MET JAVASCRIPT ee MATH.FLOOR(SG * ((STEP-AT)/ STEP) + EG * 


(AT/STEP)), 
MATH.FLOOR(SB * ((STEP-AT)/ STEP) + EB * 
H (AT/STEP))); 
Fade in ee 
Dit script laat je toe de kleur van de achtergrond aan te passen en IF (AT<=STEP) SETTIMEOUT(“sETBG()” 1); 
kan je terugvinden bij Stupid Webtricks: } 
[ http://builder.cnet.com/webbuilding/0-7690-8-6336924 
2.html?tag=st.bl.7690. dir1.7690-8-6336924-2 |. Plaats dit Java- FUNCTION FADE(A,B,‚C,D,E,F,G) { 
Script in de HEAD-tag! SR=A;SG=B;SB=C;ER=D;EG=E;EB=F;STEP=G;AT=I; 
SETBG(); 

HEXA = NEW ARRAY(16); } 
FOR(VAR i = O; Î < IO; 14+) HEXA[IJ = i; 
HEXA[To]="A"; HEXA[1I]="B"; HEXA[12]="C"; FADE(0,0,0,255,255,255,100);O 
HEXA[13]="D"; HEXA[I4]="E"; HEXA[15]="F"; — Peter D'Hollander — 


FUNCTION HEX(i) { 


IF (i < Oo) RETURN “oo”; IN HET VOLGENDE 

ELSE IF (Ì > 255) RETURN “FF”; NUMMER HEBBEN 

ELSE RETURN “” + HEXA[MATH.FLOOR(i/16) ] + HEXA[i%16]; WE HET OVER STRINGS 
} EN ARRAYS. 
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